require('./Pagecsjsmain.less');
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import { Button,Page, Panel,PanelHeader, PanelBody, PanelFooter,ButtonArea,
  MediaBox,Cells, Cell,CellHeader,MediaBoxTitle,MediaBoxHeader,
  MediaBoxDescription,MediaBoxBody,MediaBoxInfo,MediaBoxInfoMeta,
  CellBody,CellFooter,Toast, Form,FormCell,Radio,Gallery,GalleryDelete,
  Uploader,TextArea,ActionSheet,Flex,FlexItem,SearchBar} from  'react-weui/build/packages'
import {Control} from 'react-keeper';
import construction  from './../../../assets/icon/zhzj/施工单位.png';
import shizheng  from './../../../assets/img/市政图标.png';
import fangjian  from './../../../assets/img/房建图标.png';
import qiao  from './../../../assets/img/桥.png';
import zhongdiangongcheng  from './../../../assets/img/重点工程图标.png';
import gaosulu  from './../../../assets/img/高速路.png';
import xiaohongqi  from './../../../assets/img/小红旗.png';


class Csjsmain extends React.Component {

  constructor(props) {
    super(props);
    this.handleChange=this.handleChange.bind(this);
    this.handleCancel=this.handleCancel.bind(this);
  }

  handleChange(text){
    Actions.handleChange(text);
  }

  handleCancel(){
    Actions.handleCancel();
  }

  render() {
    return (
      <div>
        <SearchBar onChange={this.handleChange}
                   onCancel={this.handleCancel}
                   defaultValue=""
                   placeholder="请输入企业名称"
        >
        </SearchBar>

        {
          this.state.csjsmain.searchDivShow && this.state.csjsmain.searchData.length > 0 &&
          <div className="searchDisDiv" onClick={this.handleCancel}>
            <Panel>
              <PanelBody>
                {this.state.csjsmain.searchData.map((item, i) => {
                  return (
                    <MediaBox type="appmsg" onClick={() => {
                      Control.go('/csjshome/csjsdetail', {dataDetail:item})
                    }}>
                      <MediaBoxHeader>
                        <img src={construction} style={{
                          width: 30,
                          height: 30,
                          marginTop: 15
                        }}/>
                      </MediaBoxHeader>
                      <MediaBoxBody>
                        <MediaBoxTitle>{item.pname}</MediaBoxTitle>
                        <MediaBoxDescription>
                          {item.pcode}<br/>
                          <span className="pname">{item.city}</span>
                        </MediaBoxDescription>
                      </MediaBoxBody>
                    </MediaBox>
                  )
                })
                }
              </PanelBody>
            </Panel>
          </div>
        }
        <PanelBody>
          <div className="navdiv">
            <div className="navicon">
              <div className="iconDiv">
                <img src={shizheng} style={{
                  width: 32,
                  height: 32,
                  marginTop: 1,
                  marginLeft:20
                }} onClick={()=>{
                  Actions.handleNav(1);
                }}/>
              </div>
              <div className="iconDiv2">
                <img src={fangjian} style={{
                  width: 25,
                  height: 25,
                  marginTop: 3
                }} onClick={()=>{
                  Actions.handleNav(2);
                }}/>
              </div>
              <div className="iconDiv">
                <img src={zhongdiangongcheng} style={{
                  width: 30,
                  height: 30,
                  marginLeft:8
                }} onClick={()=>{
                  Actions.handleNav(3);
                }}/>
              </div>
            </div>
            <div className="navspan">
              <div className="spanDiv">
                    <span className="navspan1" onClick={()=>{
                      Actions.handleNav(1);
                    }}>市政</span>
              </div>
              <div className="spanDiv2">
              <span className="navspan2" onClick={()=>{
                Actions.handleNav(2);
              }}>房建</span>
              </div>
              <div className="spanDiv">
              <span className="navspan3" onClick={()=>{
                Actions.handleNav(3);
              }}>重点工程</span>
              </div>
            </div>
          </div>
        </PanelBody>

        <PanelBody style={{
          width:"100%",
          float:"left"
        }}>
          {
            this.state.csjsmain.pdata.length > 0 ?
              this.state.csjsmain.pdata.map((item,i)=>{
                return (
                  <Panel>
                    <PanelBody>
                      <MediaBox key={i} type="appmsg" onClick={() =>
                      {Control.go('/csjshome/csjsdetail',{dataDetail:item}
                      )}}>
                        <MediaBoxHeader>
                          <img src={i%2==1?gaosulu:qiao} style={{
                            width:35,
                            height:35,
                            marginTop:15
                          }}/>
                        </MediaBoxHeader>
                        <MediaBoxBody>
                          <MediaBoxTitle>
                            <span className="pname" style={{
                              float:"left"
                            }}>{item.title}</span>
                            <div className="radiusDiv">
                              <span className="rediusPname">市政</span>
                            </div>
                          </MediaBoxTitle>
                          <MediaBoxDescription>
                            <img src={xiaohongqi} style={{
                              width:13,
                              height:13
                            }}/>
                            形象进度<br/>
                            {item.createTime}
                          </MediaBoxDescription>
                        </MediaBoxBody>
                      </MediaBox>
                    </PanelBody>
                  </Panel>
                )
              })
              :
              <Panel>
                <PanelBody>
                  <MediaBox>搜索不到结果</MediaBox>
                </PanelBody>
              </Panel>
          }
        </PanelBody>
      </div>
    );
  }

  componentWillMount() {
    Actions.loadData();
  }

  componentDidMount() {

  }

  componentWillReceiveProps(nextProps) {

  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.csjsmain || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

}

ReactMixin.onClass(Csjsmain, Reflux.connect(Store, 'csjsmain'));


export default Csjsmain ;
